var strVar = "";
strVar += "<table>";
strVar += "    <thead>";
strVar += "        <tr>";
strVar +=
	'            <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">{{ key | capitalize }} <span class="arrow" :class="sortOrders[key] > 0 ? \'asc\' : \'dsc\'">';
strVar += "          </span>";
strVar += "            </th>";
strVar += "        </tr>";
strVar += "    </thead>";
strVar += "    <tbody>";
strVar += '        <tr v-for="entry in filteredHeroes">';
strVar += '            <td v-for="key in columns">{{entry[key]}}</td>';
strVar += "        </tr>";
strVar += "    </tbody>";
strVar += "</table>";

Vue.component("demo-grid", {
	template: strVar,
	props: {
		heroes: Array,
		columns: Array,
		filterKey: String,
	},
	data: function() {
		var sortOrders = {};
		this.columns.forEach(function(key) {
			sortOrders[key] = 1;
		});
		return {
			sortKey: "",
			sortOrders: sortOrders,
		};
	},
	computed: {
		filteredHeroes: function() {
			var sortKey = this.sortKey;
			var filterKey = this.filterKey && this.filterKey.toLowerCase();
			var order = this.sortOrders[sortKey] || 1;
			var heroes = this.heroes;
			if (filterKey) {
				heroes = heroes.filter(function(row) {
					return Object.keys(row).some(function(key) {
						return (
							String(row[key])
								.toLowerCase()
								.indexOf(filterKey) > -1
						);
					});
				});
			}
			if (sortKey) {
				heroes = heroes.slice().sort(function(a, b) {
					a = a[sortKey];
					b = b[sortKey];
					return (a === b ? 0 : a > b ? 1 : -1) * order;
				});
			}
			return heroes;
		},
	},
	filters: {
		capitalize: function(str) {
			return str.charAt(0).toUpperCase() + str.slice(1);
		},
	},
	methods: {
		sortBy: function(key) {
			this.sortKey = key;
			this.sortOrders[key] = this.sortOrders[key] * -1;
		},
	},
});

// bootstrap the demo
var demo = new Vue({
	el: "#example",
	template:
		"<div>" +
		'<form id="search">Search <input name="query" v-model="searchQuery" /></form>' +
		'<demo-grid :heroes="gridData" :columns="gridColumns" :filter-key="searchQuery"></demo-grid>' +
		"</div>",
	data: {
		searchQuery: "",
		gridColumns: ["name", "power"],
		gridData: [
			{ name: "Chuck Norris", power: Infinity },
			{ name: "Bruce Lee", power: 9000 },
			{ name: "Jackie Chan", power: 7000 },
			{ name: "Jet Li", power: 8000 },
		],
	},
});
